<template>
  <view class="">
    <u-popup :show="onShow" :close-on-click-overlay="false" mode="bottom" border-radius="14">
      <view class="pd-2">
        <view class="pr mgb-2">
          <view class="tac font-s16"> 价格明细 </view>
          <view class="pa" style="top: 0; right: 0">
            <u-icon size="20" name="close" @click="handleClose" />
          </view>
        </view>
        <view class="pd-2 bgf border-radius">
          <view class="cf">
            <view class="fl color06"> 商品总价(共{{ formData.totalNum }}件) </view>
            <view class="fr color08"> ￥{{ formData.proTotalPrice }} </view>
          </view>
          <u-line color="#e4e4e4" />
          <view class="cf">
            <view class="fl color06"> 折扣方式 </view>
            <view class="fr color08">
              {{ formData.discountType == 1 ? '消费积分折扣' : '物业积分折扣' }}
            </view>
          </view>
          <u-line color="#e4e4e4" />
          <view class="cf">
            <view class="fl color06"> 抵扣分数 </view>
            <view class="fr color08">
              {{ formData.comunityIntegral }}
            </view>
          </view>
          <u-line color="#e4e4e4" />
          <view class="cf">
            <view class="fl color06"> 抵扣金额 </view>
            <view class="fr color08">
              {{ formData.deductionPrice }}
            </view>
          </view>
          <u-line color="#e4e4e4" />
          <view class="cf">
            <view class="fl color06"> 实付金额 </view>
            <view class="fr color08"> ￥{{ Number(formData.payPrice).toFixed(2) }} </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { orderInfo } from '../../../utils/merorder/mer';
export default {
  props: {
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      onShow: false,
      formData: { totalNum: 0, proTotalPrice: 0, discountType: 0, comunityIntegral: 0, deductionPrice: 0, payPrice: 0 }
    };
  },
  mounted() {
    if (this.orderId) {
      this.orderInfo();
    }
  },
  methods: {
    /** 打开弹窗 */
    handleOpen() {
      this.onShow = true;
    },
    handleClose(type) {
      this.onShow = false;
    },
    orderInfo() {
      orderInfo({
        orderId: this.orderId
      }).then((res) => {
        this.formData = res.data || {};
      });
    }
  }
};
</script>

<style>
/* 根据需要添加样式 */
.cf {
  display: flex;
  justify-content: space-between;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.pd-2 {
  padding: 20rpx;
}
.mgb-2 {
  margin-bottom: 20rpx;
}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.tac {
  text-align: center;
}
.font-s16 {
  font-size: 16px;
}
.color06 {
  color: #666;
}
.color08 {
  color: #888;
}
.bgf {
  background-color: #fff;
}
.border-radius {
  border-radius: 14rpx;
}
</style>
